<template>
  <div>
    <div class="datial-title">
      <p class="datial-name">可歌可泣的十二生肖传说</p>
      <p class="datial-time">2017-02-07 14：30 牛炖</p>
      <div class="des">
        首先需要感谢你在逛街打游戏睡觉唱K聊八卦谈恋爱之余还有可以打开学渣乐园观看数学视频，那我一定不会辜负你。下面，
        我将让你知道可歌可泣的十二生肖传说。请上车 首先需要感谢你在逛街打游戏睡觉唱K聊八卦谈恋爱之余还有可以打开学渣乐
        园观看数学视频，那我一定不会辜负你。下面，
      </div>
    </div>
    <div class="video">
      <d-player :options="options"></d-player>
    </div>
    <div class="content">
      <div class="content-art">昨天在朋友圈里我看到了一篇这样的文章，大约是一个家长在孩子步入三年级之际，对于自己过去教育观念的反思。其中，
        作者以家长的角度提出了几个问题和结论，将孩子的掉队和学了太多、基础不牢联系在了一起。作为老师，在此给大家深入剖析
        一下问题的根源。
        1. 上课外班造成盲目乐观？
        “开完这次三年级家长会，我想了很多很多，其实这些问题在家长会以前，期中考以前，在k少进入三年级后的一个月我就开始
        思考，也跟老公很认真的讨论过，这次家长会以后就更明确了自己的想法。
        k的表现并没有差到要吊起来抽，而我回家大约9点的时候他正在很认真的做xes的作业，爸爸在旁边教他，做完后又把课外的英
        语作业做了，上床睡着已经是10点半了。”
      </div>
      <div class="content-icon">
        <span class="iconfont">&#xe618;</span>25
        <span class="iconfont hart">&#xe653;</span>15
      </div>
    </div>
  </div>
</template>

<script>
  import VueDPlayer from 'vue-dplayer'
  import 'vue-dplayer/dist/vue-dplayer.css'

  export default {
    name: "Videodetail",
    data() {
      return {
        options: {
          video: {
            url: '../../../static/aaaaaaaaa.mp4',
            // pic: 'http://static.smartisanos.cn/pr/img/video/video_03_cc87ce5bdb.jpg'
          },
          autoplay: false,
          contextmenu: [
            {
              text: 'GitHub',
              link: 'https://github.com/MoePlayer/vue-dplayer'
            }
          ]
        }
      }
    },
    components: {
      'd-player': VueDPlayer
    }
  }
</script>

<style scoped>
  .datial-title {
    padding: .4rem;
    text-align: center;
  }

  .datial-name {
    line-height: .8rem;
    font-size: 20px;
  }

  .datial-time {
    font-size: 16px;
  }

  .des {
    padding: .2rem;
    margin-top: .3rem;
    line-height: .4rem;
    text-align: left;
    text-indent: .3rem;
    border: 0.01rem solid #797979;;
  }

  .video {
    padding:  0 .4rem;
  }

  .content {
    padding: 0 .4rem;
  }

  .content-art {
    line-height: .5rem;
    text-indent: .3rem;
  }

  .iconfont {
    margin-right: .2rem;
  }

  .hart {
    margin-left: .6rem;
  }
</style>
